<template>
  <el-container class="box">
    <el-aside width="200px" class="nav">
      <div class="el-aside__logo">超声学习平台</div>

      <el-menu
        active-text-color="#Fff"
        background-color="#375EDC"
        :default-active="$route.path"
        text-color="#fff"
        router
      >
        <el-sub-menu index="/admin">
          <!-- 多级菜单的标题 - 具名插槽 title -->
          <template #title>
            <el-icon>
              <!--   <Memo/>-->

              <el-icon>
                <HomeFilled />
              </el-icon>
            </el-icon>
            <router-link to="/admin" @click="tabAdd(1)">首页</router-link>
          </template>
        </el-sub-menu>

        <el-sub-menu index="/admin/hospital">
          <template #title>
            <el-icon>
              <el-icon>
                <Promotion />
              </el-icon>
            </el-icon>
            <router-link to="/admin/hospital" @click="tabAdd(9)">医院管理</router-link>
          </template>
        </el-sub-menu>

        <el-sub-menu index="/admin/department">
          <template #title>
            <el-icon>
              <el-icon>
                <Management />
              </el-icon>
            </el-icon>
            <router-link to="/admin/department" @click="tabAdd(10)">科室管理</router-link>
          </template>
        </el-sub-menu>

        <el-sub-menu index="/admin/department">
          <template #title>
            <el-icon>
              <el-icon>
                <Crop />
              </el-icon>
            </el-icon>
            <router-link to="/admin/hospitalDepartment" @click="tabAdd(11)"
              >医院科室管理</router-link
            >
          </template>
        </el-sub-menu>

        <el-sub-menu index="/admin/doctor">
          <template #title>
            <el-icon>
              <el-icon>
                <User />
              </el-icon>
            </el-icon>
            <router-link to="/admin/doctor" @click="tabAdd(6)">医生管理</router-link>
          </template>
        </el-sub-menu>

        <el-sub-menu index="/admin/learn">
          <template #title>
            <el-icon>
              <el-icon>
                <el-icon>
                  <Notebook />
                </el-icon>
              </el-icon>
            </el-icon>
            <span>学习管理</span>
          </template>
          <el-menu-item index="/admin/course" @click="tabAdd(3)">
            <span>课程</span>
          </el-menu-item>

          <el-menu-item index="/admin/illness" @click="tabAdd(4)">
            <span>病例</span>
          </el-menu-item>
        </el-sub-menu>

        <el-sub-menu index="/admin/account">
          <template #title>
            <el-icon>
              <el-icon>
                <DocumentCopy />
              </el-icon>
            </el-icon>
            <router-link to="/admin/account" @click="tabAdd(5)">账号管理</router-link>
          </template>
        </el-sub-menu>

        <el-sub-menu index="/admin/vip">
          <template #title>
            <el-icon>
              <el-icon>
                <Coin />
              </el-icon>
            </el-icon>
            <router-link to="/admin/vip" @click="tabAdd(7)">会员管理</router-link>
          </template>
        </el-sub-menu>

        <el-sub-menu index="/admin/orders">
          <!-- 多级菜单的标题 - 具名插槽 title -->
          <template #title>
            <el-icon>
              <el-icon>
                <MapLocation />
              </el-icon>
            </el-icon>
            <router-link to="/admin/orders" @click="tabAdd(2)">订单管理</router-link>
          </template>
        </el-sub-menu>

        <el-sub-menu index="/admin/system">
          <template #title>
            <el-icon>
              <el-icon>
                <Setting />
              </el-icon>
            </el-icon>
            <router-link to="/admin/system" @click="tabAdd(8)">系统设置</router-link>
          </template>
        </el-sub-menu>

        <el-sub-menu index="">
          <template #title>
            <el-icon>
              <el-icon>
                <el-icon>
                  <Notebook />
                </el-icon>
              </el-icon>
            </el-icon>
            <span>考试管理</span>
          </template>
          <el-menu-item index="/admin/question" @click="tabAdd(12)">
            <span>题目管理</span>
          </el-menu-item>

          <el-menu-item index="/admin/paper" @click="tabAdd(13)">
            <span>试卷管理</span>
          </el-menu-item>

          <el-menu-item index="/admin/answerStatistic" @click="tabAdd(14)">
            <span>答题统计</span>
          </el-menu-item>
        </el-sub-menu>
      </el-menu>
    </el-aside>

    <el-container>
      <el-header class="hd">
        <div>
          <el-icon>
            <Fold />
          </el-icon>
          <strong class="hd_txt"> </strong>
        </div>

        <div class="hd_other">
          <div class="other_pic">
            <img src="@/assets/docker1.jpg" alt="" />
          </div>

          <div class="other_txt">欢迎您，hlad001</div>

          <div class="other_icon">
            <i class="iconfont icon-tuichu"></i><span>退出登录</span>
          </div>
        </div>
      </el-header>

      <div class="my_tab">
        <el-tabs
          v-model="selectName"
          @tab-click="tabClick"
          @tab-remove="tabRemove"
          closable
          type="border-card"
        >
          <el-tab-pane
            v-for="(value, key) in tab.arr"
            :key="value.name"
            :label="value.title"
            :name="value.name"
          >
            {{ value.content }}
          </el-tab-pane>
        </el-tabs>
      </div>
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, reactive, onMounted, onUpdated } from "vue";
import {
  Management,
  Promotion,
  UserFilled,
  User,
  Crop,
  EditPen,
  SwitchButton,
  CaretBottom,
  Memo,
  HomeFilled,
  Van,
  CopyDocument,
  Setting,
  Monitor,
  Fold,
  QuestionFilled,
  BellFilled,
  CirclePlusFilled,
  DocumentChecked,
  Tickets,
  Stopwatch,
  UploadFilled,
  MapLocation,
  Notebook,
  DocumentCopy,
  Coin,
} from "@element-plus/icons-vue";

// import avatar from '@/assets/img/king.png'

import { useRouter } from "vue-router";

const router = useRouter();

const selectName = ref("1");

//选中标签触发的回调
const tabClick = (tab, event) => {
  console.log("tab", tab.props, "event", event);

  if (tab.props.label === "首页") {
    router.push("/admin");
  }

  if (tab.props.label === "订单管理") {
    router.push("/admin/orders");
  }

  if (tab.props.label === "课程管理") {
    router.push("/admin/course");
  }

  if (tab.props.label === "病例管理") {
    router.push("/admin/illness");
  }

  if (tab.props.label === "账号管理") {
    router.push("/admin/account");
  }

  if (tab.props.label === "医生管理") {
    router.push("/admin/doctor");
  }
  if (tab.props.label === "会员管理") {
    router.push("/admin/vip");
  }
  if (tab.props.label === "系统设置") {
    router.push("/admin/system");
  }

  if (tab.props.label === "医院管理") {
    router.push("/admin/hospital");
  }
  if (tab.props.label === "科室管理") {
    router.push("/admin/hospital");
  }

  if (tab.props.label === "医院科室管理") {
    router.push("/admin/hospitalDepartment");
  }
  if (tab.props.label === "题目管理") {
    router.push("/admin/question");
  }

  if (tab.props.label === "试卷管理") {
    router.push("/admin/paper");
  }
  if (tab.props.label === "答题统计") {
    router.push("/admin/answerStatistic");
  }
};

const tab = reactive({
  arr: [{ name: "4", title: "首页" }],
});

//移除
const tabRemove = (name) => {
  if (tab.arr.length === 1) {
    ElMessage.error("已经是最后一页了");

    return;
  }

  const index = tab.arr.findIndex((value) => {
    return value.name === name;
  });
  tab.arr.splice(index, 1); //移除元素
};

//添加
const tabAdd = (item) => {
  let index = tab.arr.length;

  index++;

  if (item === 1) {
    tab.arr.push({
      name: index,
      title: "首页",
    });
  }
  if (item === 2) {
    tab.arr.push({
      name: index,
      title: "订单管理",
    });
  }
  if (item === 3) {
    tab.arr.push({
      name: index,
      title: "课程管理",
    });
  }
  if (item === 4) {
    tab.arr.push({
      name: index,
      title: "病例管理",
    });
  }
  if (item === 5) {
    tab.arr.push({
      name: index,
      title: "账号管理",
    });
  }
  if (item === 6) {
    tab.arr.push({
      name: index,
      title: "医生管理",
    });
  }

  if (item === 7) {
    tab.arr.push({
      name: index,
      title: "会员管理",
    });
  }

  if (item === 8) {
    tab.arr.push({
      name: index,
      title: "系统设置",
    });
  }

  if (item === 9) {
    tab.arr.push({
      name: index,
      title: "医院管理",
    });
  }

  if (item === 10) {
    tab.arr.push({
      name: index,
      title: "科室管理",
    });
  }
  if (item === 11) {
    tab.arr.push({
      name: index,
      title: "医院科室管理",
    });
  }

  if (item === 12) {
    tab.arr.push({
      name: index,
      title: "题目管理",
    });
  }

  if (item === 13) {
    tab.arr.push({
      name: index,
      title: "试卷管理",
    });
  }

  if (item === 14) {
    tab.arr.push({
      name: index,
      title: "答题统计",
    });
  }
};
</script>

<style scoped lang="scss">
li {
  list-style-type: none;
}

.box {
  height: 100vh;

  .el-aside {
    background-color: #375edc;

    &__logo {
      text-align: center;
      height: 120px;
      line-height: 120px;
      color: #fff;
      font-weight: 700;
      font-size: 23px;
      border-bottom: 1px solid #4873fb;
      /* background: url('@/assets/img/logo.png') no-repeat center / 120px auto;*/
    }

    .el-menu {
      border-right: none;
    }
  }

  .hd {
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 23px;

    .hd_txt {
      margin-left: 30px;
    }
  }
}

.el-dropdown__box {
  display: flex;
  align-items: center;

  .el-icon {
    color: #999;
    margin-left: 10px;
  }

  &:active,
  &:focus {
    outline: none;
  }
}

.el-menu-item:hover,
.el-submenu__title:hover {
  background-color: #a3a3a3; /* 例如 #ff0000 */
}

/* 改变 hover 时的文字颜色 */
.el-menu-item:hover,
.el-submenu__title:hover {
  font-size: 20px;
}

.el-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #666;
  background-color: #eaeaea;
}

.hd_other {
  display: flex;

  width: 450px;
  justify-content: space-around;

  .other_pic {
    img {
      width: 35px;
      height: 35px;
      border-radius: 50%;
    }
  }

  .other_txt {
    font-size: 18px;
    line-height: 38px;
  }

  .other_icon {
    margin-top: 2px;

    i {
      color: black;
      font-size: 25px;
      font-weight: 600;
      position: relative;
      top: 3px;
    }

    span {
      font-size: 18px;

      margin-left: 10px;
    }
  }
}

.my_tab {
  height: 20px;
  background-color: white;
  border-top: 1px solid #e7e7e7;
}

.el-tabs__header {
  border: none;
}

::v-deep .el-tabs__content {
  display: none;
}

.el-menu {
  a {
    color: #fff;
    text-decoration: none;
  }
}
</style>
